<template>
  <div class="tabBar">
    <div class="headerTopMain displayFlex">
      <div class="tabBarMenuBox">
        <div class="tabBarMenu">
          <h3 class="tabBarTitle">{{tabBarData.title}}</h3>
          <ul class="tabMenuList">
            <li v-for="(tabMenuListItem,menuListIndex) in tabBarData.data" class="tabMenuListItem"
                :class="{on:tabMenuListItem.isSelected}" @click="selectListItem(menuListIndex)">
              <router-link :to='{name:tabMenuListItem.routeName,query:tabMenuListItem.query}'><img :src="tabMenuListItem.icon" alt="">{{tabMenuListItem.name}}</router-link>
            </li>
          </ul>
        </div>
        <div class="promtionBanner">
          <img :src="promtionImg" alt="">
        </div>
      </div>

      <div class="tabBarContent">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
  import './main.scss'
  export default {
    props: {
      tabBarData: {},//tab页签导航数据
    },
    data() {
      return {
        promtionImg: require('../../assets/images/tabBar/promtionBanner.png'),
      }
    },
    activated() {
      this.init();
    },
    methods: {
      init() {
        let that = this;
        that.tabBarData.data.forEach((v, i) => {
          if(v.query.type==that.$route.query.type){
            v.isSelected = true;
          }else{
            v.isSelected = false;
          }
          if (v.isSelected) {
            let breadcrumbData = [
              {name: '首页', routeName: 'index',query:{}},
              {name: that.tabBarData.title, routeName: that.tabBarData.data[0].routeName,query:that.tabBarData.data[0].query},
              {name: v.name, routeName: v.routeName,query:v.query},
            ];
            that.$store.commit('BREADCRUMB_DATA', breadcrumbData);
          }
        });
      },
      selectListItem(index){
        let that = this;
//        document.body.scrollTop = 400;
        $('body').scrollTop(400);
        that.tabBarData.data.forEach((v, i) => {
          v.isSelected = false;
          if (index == i) {
            v.isSelected = true;
            let breadcrumbData = [
              {name: '首页', routeName: 'index',query:{}},
              {name: that.tabBarData.title, routeName: that.tabBarData.data[0].routeName,query:that.tabBarData.data[0].query},
              {name: v.name, routeName: v.routeName,query:v.query},
            ];
            that.$store.commit('BREADCRUMB_DATA', breadcrumbData);
          }
        });
      },
    },
    watch: {
      'tabBarData'() {
        this.init();
      },
      '$route.query.type'(){
        this.init();
      }
    },
    components: {}
  }
</script>
